<template>
	<view :style="{'--color':color,backgroundColor:pageData.bgColor,padding:`0 ${pageData.margin*2}rpx`,}" v-if="pageData">
		<view class="notice" v-if="infoData.length" :style="{backgroundColor:pageData.foreColor,borderRadius:`${pageData.foreRadius*2}rpx`}">
			<view class="iconfont icon-gonggao  size28"></view>
			<swiper :autoplay="true"  :duration="1500" circular vertical class="swiper">
				<block v-for="(item,index) in infoData" :key="index">		
				   <swiper-item class="rows ellipsis bold300">{{item.website_article_title}}</swiper-item>
			    </block>
			</swiper>
		</view>
	</view>
</template>

<script>
	import {mapState} from 'vuex';
	export default {
		name: 'notice',
		props: {
			pageData:{
				type:Object,
				default:{}
			}
		},
		data() {
			return {
				infoData:[],
			}
		},
		mounted() {
			this.getBlockInfo();
		},
		methods: {
			async getBlockInfo(){
				const pageData = this.pageData;
				const result = await this.$getBlockInfo(pageData.list);
				if(!result.list.length || !result.list[0].list.length) return;
				this.infoData = result.list[0].list || [];
			}
			
		},
		computed:{
			...mapState(['color'])
		}
	}
</script>

<style lang="scss" scoped>
	.notice{
		width:100%;
		height: 60rpx;
		display: flex;
		align-items: center;
		color:var(--color);
		padding: 0 32rpx;
	}
	.swiper{
		flex: 1;
		height: 50rpx;
		margin-left:20rpx;
		font-size:26rpx;
		line-height: 50rpx;
		color:var(--color);
	}
	
</style>
